<template>
	<view class="container">
		<view class="header">
			<button class="create-btn" @click="navigateTo('/pages/script/create')">创建脚本</button>
		</view>
		
		<view class="content">
			<view v-if="scriptList.length === 0" class="empty-state">
				<text class="empty-text">暂无脚本，点击上方按钮创建</text>
			</view>
			
			<view v-else class="script-list">
				<view v-for="(item, index) in scriptList" :key="index" class="script-item">
					<view class="script-info">
						<text class="script-name">{{item.name}}</text>
						<text class="script-desc">{{item.description || '无描述'}}</text>
						<text class="script-date">创建于 {{item.createTime}}</text>
					</view>
					
					<view class="script-actions">
						<text class="action-btn" @click="viewScript(item)">查看</text>
						<text class="action-btn edit" @click="editScript(item)">编辑</text>
						<text class="action-btn copy" @click="copyScript(item)">复制</text>
						<text class="action-btn delete" @click="deleteScript(item)">删除</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			scriptList: []
		}
	},
	onShow() {
		this.loadScriptList()
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url
			})
		},
		loadScriptList() {
			const list = uni.getStorageSync('scriptList') || []
			this.scriptList = list
		},
		viewScript(item) {
			uni.showModal({
				title: item.name,
				content: `描述：${item.description || '无描述'}\n\n脚本内容：\n${item.content.substring(0, 200)}${item.content.length > 200 ? '...' : ''}`,
				showCancel: false,
				confirmText: '知道了'
			});
		},
		editScript(item) {
			uni.navigateTo({
				url: '/pages/script/create?id=' + item.id
			})
		},
		copyScript(item) {
			uni.setClipboardData({
				data: item.content,
				success: () => {
					uni.showToast({
						title: '脚本已复制到剪贴板',
						icon: 'success'
					});
				}
			});
		},
		deleteScript(item) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除该脚本吗？',
				success: (res) => {
					if (res.confirm) {
						try {
							// 获取当前脚本列表
							const scriptList = uni.getStorageSync('scriptList') || [];
							// 过滤掉要删除的脚本
							const newList = scriptList.filter(i => i.id !== item.id);
							
							// 保存到本地存储
							uni.setStorageSync('scriptList', newList);
							
							// 更新页面显示数据
							this.scriptList = newList;
							
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						} catch (error) {
							console.error('删除脚本失败:', error);
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						}
					}
				}
			});
		}
	}
}
</script>

<style>
.container {
	padding: 20px;
	min-height: 100vh;
	background-color: #f8f8f8;
}

.header {
	margin-bottom: 20px;
}

.create-btn {
	background-color: #007AFF;
	color: #fff;
	border-radius: 8px;
	font-size: 16px;
}

.empty-state {
	text-align: center;
	padding: 40px 0;
}

.empty-text {
	color: #999;
	font-size: 14px;
}

.script-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.script-item {
	background: #fff;
	border-radius: 12px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.script-info {
	flex: 1;
}

.script-name {
	font-size: 16px;
	color: #333;
	font-weight: 500;
	margin-bottom: 5px;
	display: block;
}

.script-desc {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
	display: block;
}

.script-date {
	font-size: 12px;
	color: #999;
}

.script-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 5px;
	border-top: 1px solid #f0f0f0;
	padding-top: 10px;
}

.action-btn {
	font-size: 14px;
	color: #007AFF;
	padding: 5px 8px;
	border-radius: 4px;
	background-color: #f8f9fa;
	text-align: center;
	min-width: 50px;
}

.action-btn.delete {
	color: #FF3B30;
	background-color: #fff2f2;
}

.action-btn.copy {
	color: #FF9500;
	background-color: #fff8f0;
}

.action-btn.edit {
	color: #34C759;
	background-color: #f0fdf4;
}
</style> 